<template>
    <div class="dialog">
      <el-dialog :title="dialogTitle" v-model="visible" :width="width" @closed="close">
        <div class="dialog-content">
          <slot name="content"></slot>
          <slot name="footer"></slot>
        </div>
      </el-dialog>
    </div>
    </template>
    <script lang='ts' setup>
    import { ref,watch,toRefs} from 'vue';
    let visible = ref(false)
    const props = defineProps<{
      dialogTitle:string,
      width:string
    }
    >()
    const {dialogTitle,width} = toRefs(props)
    // 监听输出内容变化
    // watch(() => props.dialogTitle, (newVal: any) => {
    //   dialogTitle.value = newVal;
    //   })
  
    console.log(props.dialogTitle,'props')
  
    // 打开
    const show = (data?: any) => {
      visible.value = true;
    }
     // 打开
     const cancel = (data?: any) => {
      visible.value = false;
    }
    // 提交
    const submit = () => {
      visible.value = false;
    }
    // 关闭
    const close = () => {
      visible.value = false;
    };
    
    defineExpose({
      show,
      cancel
    })
    
    </script>
    
    <style lang='scss' scoped>
  
   
  // ::v-deep .el-dialog__headerbtn .el-dialog__close{
  //   display: none !important;
  // }
  .content {
    padding: 10px 20px;
    box-sizing: border-box;
  }
    </style>
    